<script setup>

import useUserStore from '@/store/modules/user'
import {listAll} from "@/api/user.js";
import CategorySelect from "@/components/Asset/CategorySelect.vue";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  /**当前双向数据绑定的值 */
  value: {
    type: [String, Number],
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  deptId: {
    type: [String, Number],
  },
  deptName: {
    type: String,
  },
  companyId: {
    type: [String, Number],
  },
  companyName: {
    type: String,
  }
});

const emit = defineEmits(['update:value']);

const userStore = useUserStore()
const userList = ref(userStore.getUserList());

if (!userList.value.length) {
  listAll().then((response)=>{
    userStore.setUserList(response)
    userList.value = userStore.getUserList();
  })
}

function getUser(val) {
  return userList.value.find(item => item.userId === val);
}

const valueId = computed({
  get: () => props.value,
  set: (val) => {
    emit('update:value', val)
    const user = getUser(val);
    emit('update:name', user.nickName);
    emit('update:companyId', user.companyId);
    emit('update:companyName', user.companyName);
    emit('update:deptId', user.deptId);
    emit('update:deptName', user.deptName);
  }
});

</script>

<template>

  <el-select :disabled="disabled" v-model="valueId" style="width: 100%;" clearable>
    <el-option v-for="u in userList" :key="u.userId" :label="u.nickName" :value="u.userId"></el-option>
  </el-select>
</template>

<style scoped lang="scss">

</style>